{include file='header'/}
<body>
<form class="layui-form" action="javascript:;">
  <div class="mainBox">
    <div class="main-container">
      <div class="layui-form-item">
        <label class="layui-form-label">角色名称</label>
        <div class="layui-input-block">
          <input type="text" name="name" id="name" lay-verify="required" autocomplete="off"
                 placeholder="请输入角色名称"
                 class="layui-input" value="">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">选择权限</label>
        <div class="layui-input-block">
          <div id="node_ids" class="demo-tree-more"></div>
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
          <input type="radio" name="status" value="1"
                 title="启用" checked>
          <input type="radio" name="status" value="0"
                 title="禁用">
        </div>
      </div>
    </div>
  </div>
  <div class="bottom">
    <div class="button-container">
      <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
              lay-filter="admin-save">
        <i class="layui-icon layui-icon-ok"></i>
        提交
      </button>
      <button type="reset" class="pear-btn pear-btn-sm">
        <i class="layui-icon layui-icon-refresh"></i>
        重置
      </button>
    </div>
  </div>
</form>

{include file='footer'/}
<script>
  layui.use(['form', 'jquery'], function () {
    let form = layui.form;
    let $ = layui.jquery;
    let tree = layui.tree;
    load_tree(1);

    function load_tree(id = 1) {
      $.ajax({
        url: "{:url('auth_group/authorize')}?id=" + id,
        dataType: 'json',
        success: function (res) {
          res.data = res.data || [];
          tree.render({
            elem: '#node_ids',
            data: res.data,
            showCheckbox: true,
            id: 'nodeDataId',
          });
        }
      });
    }


    form.on('submit(admin-save)', function (data) {
      let id = $('#id').val();
      let name = $('#name').val();
      let status = $("input[name='status']:checked").val()
      var checkedData = tree.getChecked('nodeDataId');
      var ids = '';
      $.each(checkedData, function (i, v) {
        ids += (v.id) + ',';
        if (v.children !== undefined && v.children.length > 0) {
          $.each(v.children, function (ii, vv) {
            ids += (vv.id) + ',';
            if (vv.children !== undefined && vv.children.length > 0) {
              $.each(vv.children, function (iii, vvv) {
                ids += (vvv.id) + ',';
              });
            }
          });
        }
      });
      ids = ids.substring(0, ids.length - 1);
      var loading = layer.load(2);
      $.ajax({
        url: "{:url('auth_group/add')}",
        data: {
          id: id,
          name: name,
          rules: ids,
          status: status
        },
        dataType: 'json',
        type: 'post',
        success: function (res) {
          layer.close(loading);
          if (res.code === 200) {
            hui_msg(res.msg, 1, function () {
              window.location.reload();
            });
          } else {
            hui_msg(res.msg, 2);
          }
        }
      })
      return false;
    });
  })
</script>
<script>
</script>
</body>
</html>
